<template>
  <div style="height: calc(100% - 50px)" class="workspace">
    <el-container
      ref="listWarp"
      style="height: 100%; background-color: #fafafa"
      v-loading="loading"
    >
      <el-aside
        width="230px"
        class="left"
        style="background-color: #fff; height: 300px"
      >
        <el-container class="h100">
          <el-header class="top" height="45px" style="text-indent: 5px">
            <div style="float: left; margin-left: 5px"></div>
            <span>消息中心</span>
          </el-header>
          <el-main class="pd0 h100" style="padding: 0">
            <div
              v-for="(item, index) in DataList"
              @click="(val) => funSelectData(item, index)"
              :class="index == active ? 'item on' : 'item'"
              :key="item.id"
            >
              <span class="name">{{ item.appName }}</span>
              <span style="margin-left: -75px; font-weight: bold">{{
                item.numbers
              }}</span>
            </div>
          </el-main>
        </el-container>
      </el-aside>
      <div
        class="h100"
        style="
          background-color: #fff;
          margin-left: 10px;
          border-top: 2px solid #f57d0d;
          padding: 0;
          height: 100%;
          width: calc(100% - 230px);
        "
      >
        <el-header
          height="45px"
          style="border-bottom: 1px solid rgba(0, 0, 0, 0.1); line-height: 45px"
        >
          <div style="float: left">
            <el-button size="small" @click="allYiDu">全部已读</el-button>
            <el-button size="small" @click="allRemove">删除已读</el-button>
          </div>
          <div style="float: right">
            <el-input
              size="small"
              v-model="input"
              placeholder="请输入想要搜索的内容"
              clearable
              @change="serachVal"
            >
              <i class="el-icon-search" slot="suffix"></i>
            </el-input>
          </div>
        </el-header>
        <el-main
          style="height: calc(100% - 45px); box-shadow: none; padding: 3px 0"
          class="page-main"
        >
          <div
            style="height: calc(100% - 50px); padding: 0 15px"
            v-if="listMessageList.length > 0"
          >
            <div
              style="
                padding: 20px 10px;
                border-bottom: 1px solid #ececf0;
                justify-content: space-between;
              "
              class="flex box"
              v-for="(item, index) in listMessageList"
              :key="index"
              @click="showMessage(item)"
            >
              <span
                class="flex"
                style="
                  width: 87%;
                  display: inline-block;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                <i
                  style="
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    background-color: red;
                  "
                  v-if="item.status == '0'"
                ></i>
                {{ item.content }}
              </span>
              <span style="float: right; width: 155px">{{
                item.sendTime
              }}</span>
            </div>
          </div>
          <div
            style="
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #777;
            "
            v-else
          >
            暂无数据
          </div>
        </el-main>
        <el-footer
          style="
            height: 50px;
            background-color: #fff;
            line-height: 30px;
            border: none;
          "
          class="page-footer"
        >
          <el-pagination
            style="
              padding-top: 10px;
              background-color: #fff;
              text-align: center;
              bottom: 50px;
            "
            background
            layout="prev, pager, next,jumper,total,sizes"
            @size-change="evtPageSizeChange"
            @current-change="evtPageCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[20, 50, 100, 500]"
            :total="totalRows"
          ></el-pagination>
        </el-footer>
      </div>
    </el-container>
    <template>
      <el-dialog
        title="消息详情"
        :visible.sync="dialogFormVisible"
        width="650px"
        :append-to-body="true"
        lock-scroll
        :destroy-on-close="true"
        :close-on-click-modal="false"
        @close="close"
      >
        <div class="win-warp" style="height: 300px; padding: 0 25px">
          <p style="font-size: 16px">{{ messCon.title }}</p>
          <p>{{ messCon.content }}</p>
        </div>
      </el-dialog>
    </template>
  </div>
</template>


<script>
import { indexApi } from "@/api/home/index";
import { messageCenterApi } from "@/api/home/messageCenter";
import toolButton from "@/itsoftUI/components/toolbar/toolbutton";
export default {
  name: "index",
  components: {
    toolButton,
  },
  data() {
    return {
      active: "0",
      dialogFormVisible: false,
      loading: false,
      DataList: [],
      input: "",
      currentPage: 1,
      totalRows: 0,
      pageSize: 20,
      listMessageList: [],
      activeName: "",
      messCon: {},
    };
  },
  methods: {
    close() {
      this.getMessageCenter();
    },
    //按钮事件
    toolButtonClick(text) {
      switch (text) {
        case "关闭":
          this.defaultLayout = true;
          this.uploadDisabled = true;
          // this.dialogClose();
          this.dialogFormVisible = false;
          break;
      }
    },
    serachVal(val) {
      this.input = val;
      this.listMessage();
    },
    allYiDu() {
      if (this.listMessageList.length == 0) {
        this.$message.warning("暂无数据");
        return false;
      }
      let status = "0";
      messageCenterApi.StatusMessage(status).then((res) => {
        if (res.status == "success") {
          this.$message.success("操作成功");
          this.listMessage();
          this.getMessageCenter();
        }
      });
    },
    allRemove() {
      if (this.listMessageList.length == 0) {
        this.$message.warning("暂无数据");
        return false;
      }
      let status = "1";
      messageCenterApi.StatusMessage(status).then((res) => {
        if (res.status == "success") {
          this.$message.success("操作成功");
          this.listMessage();
          this.getMessageCenter();
        }
      });
    },
    showMessage(item) {
      this.dialogFormVisible = true;
      this.messCon = item;
      let status = "0";
      messageCenterApi.StatusMessage(status, item.id).then((res) => {
        if (res.status == "success") {
          // this.listMessage();
          // this.getMessageCenter();
        }
      });
    },
    funSelectData(val, index) {
      this.active = index;
      this.activeName = val.appName;
      this.listMessage();
    },
    evtPageSizeChange(val) {
      //每页数量
      this.pageSize = val;
      this.listMessage();
    },
    evtPageCurrentChange(val) {
      //分页
      this.currentPage = val;
      this.listMessage();
    },
    //消息
    listMessage() {
      this.loading = true;
      indexApi
        .listMessage(
          this.currentPage,
          this.pageSize,
          this.activeName,
          this.input
        )
        .then((res) => {
          if (res.status === "success") {
            this.listMessageList = res.data.rows;
            this.totalRows = res.data.total;
            this.loading = false;
          }
        });
    },
    //获取数量
    getMessageCenter() {
      messageCenterApi.CountMessage().then((res) => {
        if (res.status == "success") {
          this.DataList = res.data;
          // this.activeName = this.DataList[0].appName;
          this.listMessage();
        }
      });
    },
  },
  created() {
    this.getMessageCenter();
  },
  watch: {
    $route: function () {},
  },
};
</script>
<style lang="scss" scoped>
.box {
  cursor: pointer;
  &:hover {
    background-color: #fafafa;
  }
}
.flex {
  display: flex;
  align-items: center;
}
.btn {
  background-image: linear-gradient(to right, #fbaf07, #f57a0d);
}
.line-p {
  width: 90%;
  margin: 15px auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.head-title {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}
.left {
  //   background-color: #f1f1f1;
  border-top: 2px solid #f57d0d;
  .top {
    position: relative;
    line-height: 45px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #666666;

    span {
      font-size: 13px;
      font-weight: bold;
      padding-left: 5px;
    }

    i {
      font-weight: bold;
      position: absolute;
      top: 15px;
      right: 20px;
      cursor: pointer;

      &:hover {
        color: #409eff;
      }
    }
  }

  .item {
    position: relative;
    // float: left;
    width: 99%;
    height: 50px;
    text-indent: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;

    span {
      float: left;
      width: 175px;
      height: 45px;
      line-height: 42px;
      padding-left: 25px;
    }

    .name {
      overflow: hidden;
    }

    .remark {
      font-size: 12px;
      color: #999999;
      overflow: hidden;
    }

    i {
      position: absolute;
      top: 20px;
      left: 5px;
      color: #666666;
      display: block;
      cursor: pointer;
    }

    &:hover:not(.on) {
      background-color: #f7f7f7;
    }
  }

  .on {
    background-color: #fff3ea;
    cursor: default !important;
    border-left: 2px solid #f57d0d;
    color: #f57d0d !important;
    display: flex;
    align-items: center;
    i {
      display: block;
    }
  }
}

.line {
  float: left;

  .el-divider__text {
    font-weight: bold !important;
    color: #333333;
    font-size: 13px;
  }
}

.formitem {
  color: #606266;
  float: left;
  height: 80px;
  line-height: 80px;
  font-size: 13px;
  width: calc(100% - 2px);
  border: 1px solid #dcdfe6;
  border-bottom: 0px solid #dcdfe6;

  .label {
    float: left;
    width: 60px;
    color: #888888;
    text-align: right;
    padding-right: 10px;
  }

  .input {
    float: left;
  }
}

.btn {
  text-align: center;
  float: left;
  width: 100%;
  margin-top: 10px;

  .el-button {
    width: 100px;
    margin-right: 60px;
  }
}

.rolestable {
  background-color: #dcdfe6;
  width: 100%;

  tr {
  }

  td {
    padding: 6px 10px;
    background-color: #ffffff;
  }

  .name {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #606266;
  }

  .roles {
    font-size: 13px;
  }

  .tdbk {
    background-color: #f7f7f7 !important;
  }
}
.workspace {
  ::v-deep .el-tabs__item:hover {
    color: #f34c15;
  }
  ::v-deep .el-tabs__item.is-active {
    color: #f34c15;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #f34c15 !important;
  }
  ::v-deep .el-tabs__header {
    background-color: #fafafa;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    // background: #fafafa !important;
    background-color: #fafafa;
  }
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #f34c15;
  }
}
</style>

